/**
 * Steps Component Style for tingle
 * @author muwen.lb
 *
 * Copyright 2014-2016, Tingle Team.
 * All rights reserved.
 */
.{$prefix}-steps
  .{$prefix}-steps-item
    position relative
    display inline-block
    min-height 40px
    margin-top 74px
    vertical-align top
    .{$prefix}-steps-main
      .{$prefix}-steps-detail-arrow
        position absolute
        top 45px
        font-family kuma
        font-size 34px
        margin-left -50%
        left 13px
        &::before
          content "\e613"
          color #ccc
        &::after
          content "\e613" 
          color #f2f2f2 
          position absolute 
          top 2px 
          left 0 
  .{$prefix}-steps-item-last
    .{$prefix}-steps-title
      padding-right 0 
  .{$prefix}-steps-tail
    position absolute 
    left 0 
    top 19px
    padding 0 0 0 24px 
    width 100% 
    >i
      display block 
      width 100% 
      height 2px 
      background-color rgba(31, 56, 88, 0.1)
  .{$prefix}-steps-head
    position absolute 
    left 0 
    top 8px 
    z-index 1 
    .{$prefix}-steps-icon
      display inline-block 
      width 24px 
      height 24px 
      border-radius 12px
      border 1px solid #66bc5c
      text-align center 
      line-height 22px
      font-size 12px 
      vertical-align middle 
  .{$prefix}-steps-main
    color rgba(31, 56, 88, 0.6)
    .{$prefix}-steps-title
      white-space nowrap 
      color rgba(0, 0, 0, 0.8)
    .{$prefix}-steps-description
      color rgba(0, 0, 0, 0.6)
  &.{$prefix}-steps-type-default
    .{$prefix}-steps-item
      &.{$prefix}-steps-no-desc
        margin-top 0 
    .{$prefix}-steps-main
      position absolute 
      .{$prefix}-steps-title
        position relative 
        left 12px 
        display inline-block 
        margin-left -50% 
        margin-top 40px 
        text-align center 
      .{$prefix}-steps-description
        position absolute 
        left -1em 
        bottom 60px 
        padding 5px 15px 
        width 146px 
        height 60px 
        background-color white 
        box-shadow 0 1px 4px 0 rgba(31, 56, 88, 0.15)
        line-height 2 
        overflow hidden 
        -webkit-line-clamp 2 
        -webkit-box-orient vertical 
        text-overflow ellipsis 
        display -webkit-box 
        border 1px solid rgba(31, 56, 88, 0.2)
        border-radius 3px
      .{$prefix}-steps-description-arrow
        position absolute 
        bottom 53px 
        left 5px 
        border-color transparent 
        border-style solid 
        border-width 7px 
        border-bottom-width 0 
        border-top-color rgba(31, 56, 88, 0.05) 
        content ' ' 
        line-height 0 
        display block 
        &:before, &:after 
          border-color transparent 
          border-style solid 
          border-width 5px 
          border-bottom-width 0 
          border-top-color white 
          content ' ' 
          line-height 0 
          display block 
          position absolute 
          bottom 4px 
          left -5px 
        &:before
          bottom 3px 
          border-top-color rgba(31, 56, 88, 0.2)
  &.{$prefix}-steps-type-title-on-top
    .{$prefix}-steps-item
      margin-top 28px 
    .{$prefix}-steps-main
      position absolute 
      .{$prefix}-steps-title
        position relative 
        left 12px 
        top -18px 
        display inline-block 
        margin-left -50% 
        text-align center 
      .{$prefix}-steps-description
        position absolute 
        left 12px 
        display inline-block 
        margin-left -50px 
        margin-top 40px 
        width 100px 
        text-align center 
  &.{$prefix}-steps-type-long-desc
    .{$prefix}-steps-item
      margin-top 8px 
    .{$prefix}-steps-main
      padding 10px 24px 0 
    .{$prefix}-steps-title
      position relative 
      padding 0 8px 
      display inline-block 
      background-color #fff 
    .{$prefix}-steps-description
      padding 8px 
      min-width 180px 
  .{$prefix}-steps-status-finish
    &.{$prefix}-steps-item
      .{$prefix}-steps-tail
        i
          background-color #66bc5c
  .{$prefix}-steps-status-finish, .{$prefix}-steps-status-process
    .{$prefix}-steps-icon
      background-color #66bc5c
      color #fff 
  .{$prefix}-steps-status-wait
    .{$prefix}-steps-icon
      background-color rgba(31, 56, 88, 0.04)
      border-color rgba(31, 56, 88, 0.2)
      color rgba(31, 56, 88, 0.2)
    .{$prefix}-steps-title
      color rgba(31, 56, 88, 0.3)
  .{$prefix}-steps-status-process
    .{$prefix}-steps-title
      color rgba(0, 0, 0, 0.6)
  &.{$prefix}-steps-vertical
    .{$prefix}-steps-head
      top 0 
    .{$prefix}-steps-item
      display block 
      margin-top 0 
      min-height 50px 
      &.{$prefix}-steps-status-process
        .{$prefix}-steps-description
          color rgba(31, 56, 88, 0.6)
    .{$prefix}-steps-tail
      left 11px
      top 0 
      padding 24px 0 0 0 
      width 0 
      height 100% 
      i
        width 2px 
        height 100% 
        background-color rgba(31,56,88,0.1)
    .{$prefix}-steps-main
      padding 5px 0 0 30px 
      .{$prefix}-steps-title
        margin-left 0 
      .{$prefix}-steps-description
        margin-top 4px 
        text-indent 0 
  .{$prefix}-steps-small
    margin-left 20px 
    .{$prefix}-steps-head
      .{$prefix}-steps-icon
        font-size 12px 
    .{$prefix}-steps-tail
      top 13px
    &.{$prefix}-steps-vertical
      .{$prefix}-steps-tail
        left 5px
        top 0 
    .{$prefix}-steps-head
      .{$prefix}-steps-icon
        width 12px 
        height 12px 
        border-radius 6px
        line-height 10px
  &.{$prefix}-steps-noicon
    .{$prefix}-steps-head
      top 9px 
      left 0px 
      .{$prefix}-steps-icon
        width 12px 
        height 12px 
        border-radius 6px 
        &:after
          content '' 
    .{$prefix}-steps-main
      .{$prefix}-steps-title
        margin-top 32px 
        left 5px 
      .{$prefix}-steps-description
        bottom 46px 
      .{$prefix}-steps-description-arrow
        bottom 39px 
        left -2px 
    .{$prefix}-steps-tail
      padding 0 0 0 12px 
      top 16px
    .{$prefix}-steps-status-wait
      .{$prefix}-steps-icon
        background-color rgba(31, 56, 88, 0.04)
        border-color rgba(31, 56, 88, 0.04)
    &.{$prefix}-steps-vertical
      .{$prefix}-steps-head
        top -5px 
        left 7px 
      .{$prefix}-steps-main
        .{$prefix}-steps-title
          margin-top -5px 
      .{$prefix}-steps-tail
        padding 10px 0 0 1px 
        top 0
  .{$prefix}-steps-detail
    >.{$prefix}-steps-detail-con
      display none 
      margin-top 74px 
      width 800px 
      background-color rgba(242, 242, 242, 1) 
      padding 10px 
      border 1px solid #ccc 
  .{$prefix}-steps-detail.{$prefix}-steps-detail-current
    >.{$prefix}-steps-detail-con
      display block 
